<template>
  <el-dialog title="历史上报" :visible.sync="dialogVisible" width="95%" top="3vh" :before-close="handleClose" :close-on-click-modal="false">
    <div class="rj-container">
      <el-form ref="listQuery" :model="listQuery" :inline="true">
        <el-form-item label="事件名称" prop="title">
          <el-input v-model="listQuery.title" placeholder="请输入事件名称" clearable size="small" style="width: 180px" @keyup.enter.native="getList" />
        </el-form-item>
        <el-form-item label="上报时间">
          <el-date-picker v-model="timeValue" clearable size="small" type="datetimerange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right" @change="getList" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="small" @click="getList">搜 索</el-button>
          <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重 置</el-button>
          <el-button type="primary" icon="el-icon-download" size="small" @click="handleExportList">导出全部</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="loading" border :data="ticketList" :header-cell-style="{textAlign:'center'}" @selection-change="handleSelectionChange">
        <!-- <el-table-column type="selection" width="55" align="center" /> -->
        <el-table-column label="#" type="index" :index="indexAdd" width="80" align="center" />
        <el-table-column label="事件名称" prop="sjmc" :show-overflow-tooltip="true" align="center" min-width="130" />
        <el-table-column label="事件分类" prop="sjfl" :show-overflow-tooltip="true" align="center" width="220" />
        <el-table-column label="事件属性" prop="sjsx" :show-overflow-tooltip="true" align="center" width="150" />
        <el-table-column label="院区" prop="hospital" :show-overflow-tooltip="true" align="center" width="130" />
        <el-table-column label="病区" prop="wardName" :show-overflow-tooltip="true" align="center" width="130" />
        <el-table-column label="上报人" prop="tbr" :show-overflow-tooltip="true" align="center" width="120" />
        <el-table-column label="上报日期" align="center" prop="fsrq" width="150">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.fsrq,"{y}-{m}-{d}") }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="140" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-edit" @click="openDetail(scope.row)">上报数据</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageIndex" :limit.sync="queryParams.pageSize" @pagination="getList" />
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleClose">关 闭</el-button>
    </div>
    <RjDetail ref="rjDetail" />
  </el-dialog>
</template>
<script>
import {
  getRjList
} from '@/api/baqsj/ruijing'
import { Message, Loading } from 'element-ui'
import { formatJson } from '@/utils'
import { handleYwExport, handleYLQXExport } from '@/utils/handleExcel'
import RjDetail from './detail.vue'
import { list } from '@/api/system/loginlog'
export default {
  name: 'BaqsjRj',
  components: { RjDetail },
  data() {
    return {
      timeValue: '',
      loadingFull: null,
      dialogVisible: false,
      queryParams: {},
      total: 0,
      loading: false,
      ticketList: [],
      listQuery: {
        title: '',
        pageIndex: 1,
        pageSize: 10
      },
      downloadLoading: false,
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        },
        {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        },
        {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }
        ]
      }
    }
  },
  created() {},
  methods: {
    indexAdd(index) {
      const page = this.queryParams.pageIndex // 当前页码
      const pagesize = this.queryParams.pageSize // 每页条数
      return index + 1 + (page - 1) * pagesize
    },
    openDetail(row) {
      this.$refs.rjDetail.open(row)
    },
    open() {
      this.dialogVisible = true
      this.getList()
    },
    handleClose() {
      this.dialogVisible = false
    },
    async handleExportList() {
      this.downloadLoading = true
      const _this = this
      const exportParams = {
        pageIndex: 1,
        pageSize: 9999,
        startTime: '',
        endTime: '',
        title: ''
      }
      if (
        this.timeValue === null ||
          this.timeValue === undefined ||
          this.timeValue === ''
      ) {
        exportParams.startTime = ''
        exportParams.endTime = ''
      } else {
        exportParams.startTime = this.parseTime(this.timeValue[0])
        exportParams.endTime = this.parseTime(this.timeValue[1])
      }
      const ticketList = await getRjList(exportParams)
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = [
          '事件编号',
          '事件名称',
          '事件分类',
          '事件属性',
          '发生日期',
          '上报人',
          '上报科室',
          '上报工号',
          '发生院区',
          '发生病区',
          '发生地点',
          '事件经过(详细信息)',
          '严重程度',
          '发生频率',
          'SAC评分',
          '申康上传状态',
          '流转状态',
          '上报时间'
        ]
        const filterVal = [
          'index',
          'sjmc',
          'sjfl',
          'sjsx',
          'fsrq',
          'tbr',
          'wardName',
          'tbrgh',
          'hospital',
          'wardName',
          'wardName',
          'tbnr',
          'yzcd',
          'fspl',
          'sjpf',
          'sk_status',
          'state',
          'barq'
        ]
        const listData = ticketList.data.list
        for (let i = 0; i < listData.length; i++) {
          listData[i].index = i + 1
          listData[i].sk_status = '已上传'
          listData[i].state = '--'
          listData[i].barq = this.parseTime(listData[i].barq)
          listData[i].fsrq = this.parseTime(listData[i].fsrq, '{y}-{m}-{d}')
        }

        const data = formatJson(filterVal, listData)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: '不安全事件-历史上报数据',
          autoWidth: true, // Optional
          bookType: 'xlsx' // Optional
        })
        this.downloadLoading = false
      })
    },
    resetQuery() {
      this.timeValue = ''
      this.resetForm('listQuery')
      this.getList()
    },

    getList() {
      this.loading = true
      if (
        this.timeValue === null ||
        this.timeValue === undefined ||
        this.timeValue === ''
      ) {
        this.listQuery.startTime = ''
        this.listQuery.endTime = ''
      } else {
        this.listQuery.startTime = this.parseTime(this.timeValue[0])
        this.listQuery.endTime = this.parseTime(this.timeValue[1])
      }
      this.listQuery.pageIndex = this.queryParams.pageIndex
      this.listQuery.pageSize = this.queryParams.pageSize
      getRjList(this.listQuery).then(response => {
        this.ticketList = response.data.list
        this.queryParams.pageIndex = response.data.pageIndex
        this.queryParams.pageSize = response.data.pageSize
        this.total = response.data.count
        this.loading = false
      })
    },
    handleView(row) {
      this.$router.push({ path: '/baqsj/review', query: { processId: row.process, workOrderId: row.id }})
    },
    handleSelectionChange() {}
  }
}

</script>
<style lang="scss" scoped>
.rj-container {
  position: relative;
}

::v-deep .el-dialog__footer {
  text-align: center;
}

::v-deep .el-dialog {
  border-radius: 15px;
}

::v-deep .el-dialog .el-dialog__body {
  flex: 1;
  overflow: auto;
  padding: 10px 20px 10px 20px;
}

::v-deep .el-tabs__item {
  padding-left: 16px !important;
  height: 50px;
  line-height: 50px;
}

</style>
